import 'dart:async';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter_project/config/common_string_config.dart';
import '../../../config/theme_color.dart';
import '../../common/privacy/dialog_common_view.dart';
import '../../common/utils/privacy_html_route_utils.dart';
import '../../common/utils/screen_size_utils.dart';
import '../../config/app_bar_view.dart';
import 'agree_privacy_login_view.dart';

class UserLoginView extends StatefulWidget {
  const UserLoginView({super.key});

  @override
  State<UserLoginView> createState() => _UserLoginViewState();
}

class _UserLoginViewState extends State<UserLoginView> {
  final TextEditingController _telController = TextEditingController();
  final FocusNode telFocusNode = FocusNode();
  final TextEditingController codeController = TextEditingController();
  final FocusNode codeFocusNode = FocusNode();
  double textSize = 12.0;
  final ValueNotifier<bool> isChose = ValueNotifier<bool>(false);
  final ValueNotifier<int> phoneInputLength = ValueNotifier<int>(0); //监听手机号长度
  final ValueNotifier<bool> isEyes = ValueNotifier<bool>(true);
  final ValueNotifier<bool> isCodeLogin = ValueNotifier<bool>(true); //是否是密码登录
  final ValueNotifier<String> verifyCodeSTtr =
      ValueNotifier<String>('获取验证码'); //是否是密码登录
  Timer? verifyTimer;

  @override
  Widget build(BuildContext context) {
    return CommonAppWidget.navAppBar(
      bgColor: Colors.white,
      childWidget: SizedBox(
        width: ScreenSizeUtils.deviceScreenHeight(context),
        child: GestureDetector(
          onTap: () {
            cancelKeyBoard();
          },
          child: Container(
            color: Colors.white,
            child: SingleChildScrollView(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  const SizedBox(
                    height: 50,
                  ),
                  Image.asset(
                    'assets/images/ic_launcher.png',
                    width: 70,
                  ),
                  const SizedBox(
                    height: 20,
                  ),
                  Text(
                    CommonStringConfig.appTitle,
                    style: const TextStyle(
                        fontSize: 15, fontWeight: FontWeight.w500),
                  ),
                  const SizedBox(
                    height: 60,
                  ),
                  Container(
                    margin: const EdgeInsets.symmetric(horizontal: 35),
                    alignment: Alignment.center,
                    height: 45,
                    decoration: BoxDecoration(
                        color: ThemeColor.mainBgColor,
                        borderRadius: BorderRadius.circular(25)),
                    child: TextField(
                      focusNode: telFocusNode,
                      controller: _telController,
                      keyboardType: TextInputType.phone,
                      style: const TextStyle(
                        fontSize: 14,
                        color: Colors.black,
                      ),
                      onChanged: (res) {
                        phoneInputLength.value = res.length;
                      },
                      decoration: InputDecoration(
                        hintText: "请输入手机号",
                        hintStyle: TextStyle(
                            fontSize: 14, color: ThemeColor.textColorSecond),
                        border: InputBorder.none,
                        contentPadding: const EdgeInsets.only(left: 20),
                      ),
                    ),
                  ),
                  const SizedBox(
                    height: 20,
                  ),
                  ValueListenableBuilder(
                      valueListenable: isCodeLogin,
                      builder:
                          (BuildContext context, bool value, Widget? child) {
                        return Visibility(
                          visible: isCodeLogin.value,
                          child: Container(
                            margin: const EdgeInsets.symmetric(horizontal: 35),
                            alignment: Alignment.center,
                            height: 45,
                            decoration: BoxDecoration(
                                color: ThemeColor.mainBgColor,
                                borderRadius: BorderRadius.circular(25)),
                            child: ValueListenableBuilder(
                                valueListenable: isEyes,
                                builder: (BuildContext context, bool isOpen,
                                    Widget? child) {
                                  return TextField(
                                    obscureText: isEyes.value,
                                    focusNode: codeFocusNode,
                                    controller: codeController,
                                    keyboardType: TextInputType.phone,
                                    style: const TextStyle(
                                      fontSize: 14,
                                      color: Colors.black,
                                    ),
                                    onChanged: (res) {},
                                    decoration: InputDecoration(
                                        hintText: "请输入密码",
                                        hintStyle: TextStyle(
                                            fontSize: 14,
                                            color: ThemeColor.textColorSecond),
                                        border: InputBorder.none,
                                        contentPadding: const EdgeInsets.only(
                                            left: 20, top: 10),
                                        suffixIcon: IconButton(
                                            onPressed: () {
                                              isEyes.value = !isEyes.value;
                                            },
                                            icon: Icon(
                                              isEyes.value
                                                  ? Icons
                                                      .visibility_off_outlined
                                                  : Icons.visibility,
                                              color: ThemeColor.textColorSecond,
                                            ))),
                                  );
                                }),
                          ),
                        );
                      }),
                  ValueListenableBuilder(
                      valueListenable: isCodeLogin,
                      builder:
                          (BuildContext context, bool value, Widget? child) {
                        return Offstage(
                          offstage: isCodeLogin.value,
                          child: Container(
                            margin: const EdgeInsets.symmetric(horizontal: 35),
                            alignment: Alignment.center,
                            height: 45,
                            decoration: BoxDecoration(
                                color: ThemeColor.mainBgColor,
                                borderRadius: BorderRadius.circular(25)),
                            child: Row(
                              children: [
                                Expanded(
                                  child: TextField(
                                    obscureText: isEyes.value,
                                    focusNode: codeFocusNode,
                                    controller: codeController,
                                    keyboardType: TextInputType.phone,
                                    style: const TextStyle(
                                      fontSize: 14,
                                      color: Colors.black,
                                    ),
                                    onChanged: (res) {},
                                    decoration: InputDecoration(
                                      hintText: "请输入验证码",
                                      hintStyle: TextStyle(
                                          fontSize: 14,
                                          color: ThemeColor.textColorSecond),
                                      border: InputBorder.none,
                                      contentPadding: const EdgeInsets.only(
                                        left: 20,
                                      ),
                                    ),
                                  ),
                                ),
                                TextButton(
                                    onPressed: () {
                                      int count = 61;
                                      verifyTimer = Timer.periodic(
                                          const Duration(seconds: 1), (timer) {
                                        if (count == 1) {
                                          cancelTimer();
                                          verifyCodeSTtr.value = '再次获取';
                                          return;
                                        }
                                        count--;
                                        verifyCodeSTtr.value = '$count';
                                      });
                                    },
                                    child: ValueListenableBuilder(
                                        valueListenable: verifyCodeSTtr,
                                        builder: (BuildContext context,
                                            String value, Widget? child) {
                                          return Text(value);
                                        })),
                              ],
                            ),
                          ),
                        );
                      }),
                  const SizedBox(
                    height: 20,
                  ),
                  Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 36),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        GestureDetector(
                          onTap: () {
                            isCodeLogin.value = !isCodeLogin.value;
                          },
                          child: Text(
                            '验证码登录',
                            style: TextStyle(
                                color: ThemeColor.textColorSecond,
                                fontSize: textSize),
                          ),
                        ),
                        Text(
                          '新用户注册',
                          style: TextStyle(
                              color: ThemeColor.mainColor, fontSize: textSize),
                        ),
                      ],
                    ),
                  ),
                  const SizedBox(
                    height: 16,
                  ),
                  ValueListenableBuilder(
                    valueListenable: phoneInputLength,
                    builder: (BuildContext context, int value, Widget? child) {
                      return GestureDetector(
                        onTap: () {
                          if (isChose.value == false) {
                            ConfirmAlertDialog.showPrivacyDialog(context,
                                childWidget: const AgreePrivacyLoginView());
                          }
                        },
                        child: Container(
                          margin: const EdgeInsets.symmetric(horizontal: 35),
                          alignment: Alignment.center,
                          height: 45,
                          decoration: BoxDecoration(
                              color: (phoneInputLength.value > 0)
                                  ? ThemeColor.mainColor
                                  : const Color(0x803778FD),
                              borderRadius: BorderRadius.circular(25)),
                          child: const Text(
                            '登录',
                            style: TextStyle(
                                fontSize: 14,
                                color: Colors.white,
                                fontWeight: FontWeight.bold),
                          ),
                        ),
                      );
                    },
                  ),
                  const SizedBox(
                    height: 10,
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      ValueListenableBuilder(
                          valueListenable: isChose,
                          builder: (BuildContext context, bool value,
                              Widget? child) {
                            String iconStr = value == false
                                ? 'assets/images/ic_agree_uncheck.png'
                                : 'assets/images/ic_agree_check.png';
                            return GestureDetector(
                              onTap: () {
                                isChose.value = !isChose.value;
                              },
                              child: Image.asset(
                                iconStr,
                                width: 18,
                              ),
                            );
                          }),
                      const SizedBox(
                        width: 4,
                      ),
                      RichText(
                          text: TextSpan(
                              text: '我已阅读并同意',
                              recognizer: TapGestureRecognizer()
                                ..onTap = () {
                                  isChose.value = !isChose.value;
                                },
                              style: TextStyle(
                                  color: ThemeColor.textColorSecond,
                                  fontSize: textSize),
                              children: [
                            TextSpan(
                              text: "《用户协议》",
                              style: TextStyle(
                                  color: const Color(0xFF7F69D9),
                                  fontSize: textSize),
                              recognizer: TapGestureRecognizer()
                                ..onTap = () {
                                  jumpUserAgreePage();
                                },
                            ),
                            TextSpan(
                              text: '和',
                              style: TextStyle(
                                  color: ThemeColor.textColorSecond,
                                  fontSize: textSize),
                            ),
                            TextSpan(
                              text: "《隐私声明》",
                              style: TextStyle(
                                  color: const Color(0xFF7F69D9),
                                  fontSize: textSize),
                              recognizer: TapGestureRecognizer()
                                ..onTap = () {
                                  jumpPrivacyPage();
                                },
                            )
                          ]))
                    ],
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }

//取消键盘
  cancelKeyBoard() {
    if (telFocusNode.hasFocus) {
      telFocusNode.unfocus();
    }
    if (codeFocusNode.hasFocus) {
      codeFocusNode.unfocus();
    }
  }

  @override
  void dispose() {
    super.dispose();
    cancelTimer();
  }

  //取消定时器
  void cancelTimer() {
    if (verifyTimer != null && verifyTimer!.isActive) {
      verifyTimer!.cancel();
    }
    debugPrint('取消了定时器');
  }
}
